<template>
	<view class="main">
		<loginVue :Visible="show" @isModal="isModal" />
		<view class="">
			<alltitleVue :title="title" :url="url" />
		</view>


		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
			<view class="public">
				<view class="info-tit">
					<image :src="details.photoUrl" mode=""></image>
					<view class="top-text">
						<view class="text-info">
							<text class="name">{{details.name}}</text>
							<text class="level">{{details.dictLabel}}</text>
							<text class="su">|</text>
							<text class="office">{{details.title}}</text>
						</view>
					</view>
				</view>
				<view class="info-text">
					<text>就诊机构</text>
					<text class="hos">成都西南中医医院</text>
				</view>
				<view class="info-text">
					<text>就诊时间</text>
					<text class="week">{{details.selecDays}}</text>
				</view>
			</view>
			<view class="public">
				<view class="num-top">
					<text>挂号费</text>
					<text>{{details.price>0?`￥${details.price}`:'免费'}}</text>
				</view>
				<view class="num-bot">
					<text v-if="details.price>0">需支付</text>
					<text>{{details.price>0?`￥${details.price}`:'免费'}}</text>
				</view>
			</view>
			<view class="public">
				<view class="paymethod">
					<view class="method">
						<image :src="wx" mode=""></image>
						<view class="">
							微信支付
						</view>
					</view>

					<image :src="gou" mode=""></image>
				</view>
			</view>
			<view class="public">
				<view class="public-tit " :class="{'public-bot':caseList.length<1}">
					<view class="" :class="{'public-bot':caseList.length<1}">
						就诊人
					</view>
					<view class="" @click="add">
						<u-icon color="#CCA566" size="30" name="plus" />

						<text style="font-size: 24rpx;" class="public-bot">添加就诊人</text>
					</view>
				</view>
				<view class="container" v-if="caseList.length<1">
					<!-- <view class="">
						请点击添加就诊人，添加就诊人挂号
					</view> -->
				</view>
				<view class="" v-else>
					<view class="info-card" v-for="(item,index) in caseList" :key="index"
						@click="cardClick(item,index)">
						<view class="card-left">
							<view class="yuan" :class="{'yuan-color':iscard==index}">
								<text :class="{'bg-color':iscard==index}"></text>
							</view>
							<text class="font-w">{{item.name}}</text>
							<text>{{item.gender}}</text>
						</view>
						<view class="">
							{{item.idCard}}
						</view>
					</view>
				</view>
			</view>
			<view class="message-box">
				<view class="">
					1、就诊：就诊当天到院后，请在医院找到医生，向医生出示预约挂号成功记录后就诊；
				</view>
				<view class="">
					2、就诊：预约挂号缴费成功后，客服会在五分钟内通过在线沟通的方式联系您，沟通具体就诊时间及注意事项；
				</view>
				<view class="">
					3、退号：本次预约就诊当天不可取消预约，如需取消，请在就诊前1天的24:00前可在[我的挂号]内在线退号，逾期不再办理；
				</view>
				<view class="">
					4、退号：一个自然月挂号缴费成功后有3次退号机会，超量后不可再次退号；
				</view>
			</view>

			<view class="btn-box" @click="submitForm">
				<allBtnVue :btnText="btnText" />
				<!-- <button @click="submitForm" class="submit-btn">提交</button> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import config from "../../utils/config";
	import allBtnVue from "../../components/allBtn.vue";
	import loginVue from "../../components/login.vue";
	import {
		toast,
		getStore,
		setStore,
		getDate,
		validateIdCard
	} from "@/utils";
	import {
		payOrders,
		patient,
		addRegistration
	} from '../../service/api.js'
	export default {
		data() {
			return {
				gou: config.ossHost + '2024/12/29/95147a85a381440591ddc6a2aa07de07.png',
				jia: config.ossHost + '2025/01/07/2d4091ba27ba49129bfc1ef1cdcac090.png',

				wx: config.ossHost + '2024/12/29/7028a997815e40d6bef384f86db12561.png',

				btnText: "支付诊费并预约",
				show: false,
				token: "",
				info: {},
				title: "确认挂号信息",
				name: '',
				iscard: 0,
				idCard: '',
				gender: '', // 自动识别的性别
				phone: '',
				nameError: '',
				idCardError: '',
				phoneError: '',
				caseList: [

				],
				payPrice: "",
				registration: {
					patientName: "",
					//就诊卡id
					patientId: "",
					//用户id
					memberId: "",
					doctorId: "",
					//就诊时间
					registrationTime: "",

				},
				details: {},
				orderId: "",
			}
		},
		components: {
			allBtnVue,
			loginVue
		},
		onLoad(options) {

			if (options.item) {


				this.details = JSON.parse(options.item);
				setStore("details", this.details);
				this.registration.doctorId = this.details.id;
				this.payPrice = this.details.price > 0 ? this.details.price : 0.00;
				this.registration.registrationTime = this.details.day;

			}
			this.getPatient()
		},
		onShow() {
			this.token = getStore("token") || "";
			this.details = getStore("details") || {};

			this.registration.doctorId = this.details.id;
			this.payPrice = this.details.price > 0 ? this.details.price : 0.00;
			this.registration.registrationTime = this.details.day;
			console.log(this.registration, this.details, "onshow");
			if (!this.token) {
				this.show = true
			}
			this.getPatient();
		},
		methods: {
			isModal(item){
				this.show=item;
			},
			async submitForm() {
				
				if (!this.token) {
					this.show = true
					return
				}
				this.info = JSON.parse(getStore("info")) || {};
				this.registration.memberId = this.info.id;
				if (this.registration.patientName != "" && this.registration.patientId != "") {
					const res = await addRegistration(this.registration);
					if (res.code == 200) {
						let item = res.data
						this.orderId = res.data.orderNumber;
						if (res.data.totalPrice > 0) {
							// 后台设置是否免费
							this.paySign(2, item); //立即支付
						} else {
							setTimeout(() => {
								uni.navigateTo({
									url: `/My/registerDetails/index?status=&backType=payment&item=${JSON.stringify(item)}`,
								});
							}, 1500);
							toast(
								"本咨询免费,医生确认后和您联系，请保持在线！"
							);
						}
					} else if (res.code == 20408) {
						//已经有订单
						setTimeout(() => {
							uni.navigateTo({
								url: `/My/register/index?status=&backType=payment`,
							});
						}, 1500);
					} else if (res.code == 500) {
						toast(res.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: `/My/register/index?status=&backType=payment`,
							});
						}, 1500);
					}
				} else {
					toast("未选择就诊卡");
				}

			},
			//请求就诊卡列表
			async getPatient() {

				let res = await patient()
				if (res.code == 200) {

					this.caseList = res.rows;
					if (this.caseList.length >= 1) {
						this.registration.patientName = this.caseList[0].name
						this.registration.patientId = this.caseList[0].id
					}
				}
			},

			add() {
				if (this.caseList.length > 0) {
					// uni.navigateTo({
					// 	url: `/My/idCard/index?url=information`
					// })
					uni.navigateTo({
						url: `/My/addCard/index?information=true&url=information`
					})
					
				} else {
					uni.navigateTo({
						url: `/My/addCard/index?information=true&url=information`
					})
				}
			},
			cardClick(item, index) {
				this.iscard = index;
				this.registration.patientName = this.caseList[this.iscard].name
				this.registration.patientId = this.caseList[this.iscard].id
			},
			goregistration(item) {

				item.dictLabel = this.synthesis[item.hisDoctorVo.level].dictLabel
				let statusItem = this.status.find(s => s.dictValue == item.status);
				item.name = statusItem ? statusItem.dictLabel : '未知状态';
				
				uni.navigateTo({
					url: `/My/registerDetails/index?item=${JSON.stringify(item)}`
				})
			},
			async paySign(index, item) {
				if (index == "1") {
					toast("支付宝支付暂未开放");
					return;
				}
				try {
					let params = {
						payType: index, //支付类型1:支付宝 2:微信
						orderNo: this.orderId,
					};
					let res = await payOrders(params);
					if (res.message == "未绑定微信！") {
						this.payBtnFlag = false;
						toast(res.message);
						setTimeout(() => {
							uni.navigateTo({
								url: "/My/setting",
							});
						}, 1500);
						return;
					}
					let data = res.data;
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							if (res.errMsg === "requestPayment:ok") {
								toast("支付成功，耐心等候");

								uni.navigateTo({
									url: `/My/register/index`
								})
								// this.goregistration(item);
							}
						},
						fail: (err) => {
							toast("支付失败");
							setTimeout(() => {
								uni.navigateTo({
									url: `/My/register/index?status=100`,
								});
							}, 1500);
						},
					});
				} catch (error) {

				}
			},





		}
	}
</script>

<style lang="scss" scoped>
	.main {

		background: #F5F3F0;

	}

	.message-box {
		padding: 24rpx;
		font-size: 22rpx;
		color: #808080;

		view {
			color: #808080;
			margin-bottom: 12rpx;
		}
	}

	.public {
		padding: 24rpx;
		margin: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 32rpx;

		.info-card {
			display: flex;
			font-size: 24rpx;
			align-items: center;
			color: #808080;
			border-bottom: 1rpx solid #E6E6E6;
			padding: 24rpx 0;

			.card-left {
				display: flex;
				align-items: center;
				border-right: 1rpx solid #E6E6E6;
				padding-right: 24rpx;
				margin-right: 24rpx;

				text {
					margin-left: 15rpx;
				}

				.yuan {
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					border: 1rpx solid #E6E6E6;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						display: inline-block;
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						margin-left: 0;
					}

					.bg-color {
						background: #CCA566;
					}
				}

				.font-w {
					font-size: 28rpx;

				}

				.yuan-color {
					border: 2rpx solid #CCA566;
				}

			}
		}

		.info-card:last-child {
			padding-bottom: 0;
			border: none;
		}

		.public-tit {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 24rpx;

			view:last-child {
				font-size: 28rpx;
				font-weight: 100;
				display: flex;
				align-items: center;
				color: #673A34;

				text {
					color: #673A34;
				}

			}
		}

		.paymethod {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}

			.method {
				display: flex;
				align-items: center;

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.num-top {
			display: flex;
			justify-content: space-between;
		}

		.num-bot {
			font-size: 32rpx;
			color: #1A1A1A;
			display: flex;
			justify-content: flex-end;
			margin-top: 24rpx;

			text:last-child {
				margin-left: 10rpx;
				color: #FF7C54;
			}
		}

		.info-text {
			margin-top: 24rpx;
			color: #808080;

			.hos {
				color: #1A1A1A;
				margin-left: 16rpx;
			}

			.week {
				color: #CCA566;
				margin-left: 16rpx;
			}
		}

		.info-tit {


			display: flex;
			align-items: center;

			border-radius: 8rpx 8rpx 8rpx 8rpx;

			image {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
			}

			.top-text {
				margin-left: 16rpx;



				.text-info {

					.name {
						font-weight: 600;
						font-size: 40rpx;
						margin-right: 16rpx;
					}

					.level {
						font-weight: 400;

					}

					.su {
						font-size: 24rpx;
						color: #E6E6E6;
						margin: 0rpx 5rpx;
					}

					.office {}
				}
			}
		}
	}


	.container {
		// padding: 20rpx;
	}

	.form-item {
		border-bottom: 1rpx solid #E6E6E6;

		.input-box {
			display: flex;
			align-items: center;
		}

		margin-bottom: 15rpx;
	}

	.label {
		display: inline-block;
		width: 100rpx;
		font-size: 24rpx;
		margin-right: 48rpx;
	}

	.input {

		font-size: 24rpx;


	}





	.error-box {
		height: 24rpx;
		display: flex;
	}

	.error {
		font-size: 20rpx;
		color: red;
		margin-left: 148rpx;
	}

	.submit-btn {

		background: #CCA566;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #fff;
		border-radius: 16rpx;
	}

	.item-box {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		padding-bottom: 24rpx;

		.gender {
			display: flex;
			align-items: center;
		}

		.gender-label {
			display: inline-block;
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			margin-right: 15rpx;
			background: #F8F8F8;
			border-radius: 50%;

		}

		.highlight {
			font-weight: bold;
			background: #CCA566;
			color: #fff;

		}
	}

	.btn-box {

		// background: #fff;
		// padding: 24rpx;

	}

	.scroll-Y {
		height: calc(100vh - 180rpx);
	}

	.public-bot {
		color: #CCA566 !important;
		margin-bottom: 0 !important;
	}
</style>